<template>
	<AppAnimation v-if="!initialized"></AppAnimation>
	<view class="container" v-else>
		<AppNavigation>
			<view class="">
				<text>{{currentDate.month}}月</text>
				<text>{{currentDate.year}}</text>
			</view>
		</AppNavigation>
		<TaskGuide v-if="!taskCompleted" :role="role" :complete="complete"></TaskGuide>
		<TravelCalendar v-if="role !== Role.ROLE_UNDEFINED"></TravelCalendar>
		<DailyFeed ></DailyFeed>
	</view>
</template>

<script>
	import AppAnimation from "@/components/AppAnimation/AppAnimation.vue"
	import AppNavigation from "@/components/AppNavigation/AppNavigation.vue"
	import {isEmpty,timeFormat} from "@/utils/util.js"
	import TaskGuide from "./components/TaskGuide.vue"
	import DailyFeed from "./components/DailyFeed.vue"
	import TravelCalendar from "./components/TravelCalendar.vue"
	import {REFRESH_INDEX,REFRESH_CALENDAR} from "@/core/constant/event.js"
	import {checkTaskCompleted} from "@/core/app.js"
	import * as Role from "@/core/constant/role.js"
	import * as RouteApi from "@/api/route/route.js"
	

	export default {
		components:{
			AppNavigation,
			TaskGuide,
			DailyFeed,
			TravelCalendar,
			AppAnimation
		},
		data() {
			return {
				calendar:[],
				curTravel:null,
				curRoute:{},
				tempFile:null,
				path:"",
				Role,
				role:Role.ROLE_UNDEFINED,
				complete:0,
				taskCompleted:false,
				initialized:false
			}
		},
		computed:{
			currentDate(){
				const curDate = new Date()
				const month = curDate.getMonth()+1
				const year = curDate.getFullYear()
				const day = curDate.getDate()
				return {
					curDate,month,year,day
				}
			},
		},
		methods:{
			initData(){
				this.$speak("/static/global/initialized.mp3")
				uni.showTabBar({
					animation:false,
					success:(res) => {
						console.log(res)
					},
					fail:(res) => {
						console.log(res)
					}
				})
				this.role = this.$store.getters.role
				this.refreshUserStatus()
				uni.$emit(REFRESH_CALENDAR)
				this.initialized = true
			},
			refreshUserStatus(){
				this.complete = this.$store.getters.complete
				this.role = this.$store.getters.role
				this.taskCompleted = checkTaskCompleted()
			}
		},
		async onLoad(){
			uni.hideTabBar({
				animation:false,
				success:(res) => {
					console.log(res)
				},
				fail:(res) => {
					console.log(res)
				}
			})
			console.log("Index.vue Onload")
			uni.$on(REFRESH_INDEX,this.initData)
		},
		onShow(){
			this.refreshUserStatus()
		}
	}
	
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
		height: 100%;
	}
	
	
	
	.container {
		display: flex;
		flex-direction: column;
		width: 600rpx;
		height:100vh;
		overflow: scroll;
		margin: auto;
		gap:0.4rem;
		
}
</style>
